<!-- 通讯录中的人员 item -->
<script setup lang="ts">
import defaultAvatar from '@/static/images/profile/avatar_placeholder.png'

defineProps<{
  avatar?: string
  name: string
  position: string
}>()
</script>

<template>
  <view class="mx-25rpx my-28rpx flex items-center justify-between bg-white">
    <view class="flex items-center">
      <image class="h-120rpx w-120rpx rounded-full bg-gray-100" :src="avatar || defaultAvatar" />
      <Spacer width="20" />
      <view>
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          {{ name }}
        </view>
        <Spacer height="4" />
        <view class="text-24rpx text-#919191 leading-32rpx">
          {{ position }}
        </view>
      </view>
    </view>
    <slot />
  </view>
</template>
